{% extends 'base.html' %}

{% block title %}导航页{% endblock %}

{% block head %}
<link href="{{url_for('static',filename='css/index.css')}}" rel="stylesheet">
{% endblock %}


{% block body %}
<!-- 这是时间和搜索界面 -->
<div class="time-search-content-container">
    <!-- 时间显示界面 -->
    <div class="d-flex justify-content-center align-items-center p-2">
        <h1 id="current-time" class="text-monospace"></h1>
    </div>

    <!-- 表单形式的搜索界面 -->
    <form id="searchContentForm" class="input-group mb-3" action="{{url_for('navigation.search')}}"  method="GET">
        <div class="input-group-prepend">
            <select class="form-control" name="engine" id="engine" aria-label="搜索引擎选择">

            {% for value, label, _ in form.engine.choices %}
                <option value="{{ value }}" {% if value == form.engine.data %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
        </select>
        </div>
        <input type="search" class="form-control" name="wd" id="wd" placeholder="搜索内容" aria-label="Search">
        <div class="input-group-append">
            <button class="btn btn-dark" type="submit">搜索</button>
        </div>
    </form>


</div>
<div class="d-flex align-content-start flex-wrap container">
    {% for icoweb in icowebs %}
        <div class="card-container mb-3 " data-bs-toggle="tooltip" data-bs-placement="top" title="{{ icoweb.name }}">
          <a href="{{ icoweb.address }}" class="card hstack"  style="  background-color: white">
            <div class="card-icon container">
              <img src="{{ icoweb.icon }}" alt="Icon" class="icon img-fluid" onerror="this.src='{{url_for('static',filename='images/2747.jpg')}}';">
            </div>
            <div class="card-content">
              <div class="card-title">{{ icoweb.name }}</div>
              <div class="card-description">{{ icoweb.tip }}</div>
            </div>
          </a>
        </div>
    {% endfor %}
</div>


<!--    <div class="icon-item mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="群晖DSM">-->
<!--        <a href="https://www.ljha.fun:50390/">-->
<!--            <img src="https://www.ljha.fun:50390/favicon.ico" alt="Icon" class="icon img-fluid" onerror="this.src='{{url_for('static',filename='images/2747.jpg')}}';">-->
<!--            <p class="icon-label">群晖桌面</p>-->
<!--        </a>-->
<!--    </div>-->
<!--    <div class="icon-item mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="群晖相册">-->
<!--        <a href="https://www.ljha.fun:5443/">-->
<!--            <img src="https://www.ljha.fun:5443/favicon.ico" alt="Icon" class="icon img-fluid" onerror="this.src='{{url_for('static',filename='images/2747.jpg')}}';">-->
<!--            <p class="icon-label">群晖相册</p>-->
<!--        </a>-->
<!--    </div>-->
<!--    <div class="icon-item mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="群晖文件">-->
<!--        <a href="https://www.ljha.fun:7001/">-->
<!--            <img src="https://www.ljha.fun:7001/favicon.ico" alt="Icon" class="icon img-fluid" onerror="this.src='{{url_for('static',filename='images/2747.jpg')}}';">-->
<!--            <p class="icon-label">群晖文件</p>-->
<!--        </a>-->
<!--    </div>-->
<!--    <div class="icon-item mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="群晖音乐">-->
<!--        <a href="https://www.ljha.fun:8801/">-->
<!--            <img src="https://www.ljha.fun:8801/favicon.ico" alt="Icon" class="icon img-fluid" onerror="this.src='{{url_for('static',filename='images/2747.jpg')}}';">-->
<!--            <p class="icon-label">群晖音乐</p>-->
<!--        </a>-->
<!--    </div>-->
<!--    <div class="icon-item mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="群晖下载">-->
<!--        <a href="https://www.ljha.fun:8001/">-->
<!--            <img src="https://www.ljha.fun:8001/favicon.ico" alt="Icon" class="icon img-fluid" onerror="this.src='{{url_for('static',filename='images/2747.jpg')}}';">-->
<!--            <p class="icon-label">群晖下载</p>-->
<!--        </a>-->
<!--    </div>-->

<!--    &lt;!&ndash; 复制上面的 div.icon-item 并修改内容来添加更多图标 &ndash;&gt;-->
<!--</div>-->

{% endblock %}


<!--<!DOCTYPE html>-->
<!--<html lang="zb-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>零一零导航页</title>-->
<!--    &lt;!&ndash; 引入 Bootstrap CSS &ndash;&gt;-->
<!--    <link href="{{url_for('static',filename='bootstrap-5.3.2-dist/css/bootstrap.min.css')}}" rel="stylesheet">-->
<!--    <link href="{{url_for('static',filename='css/base.css')}}" rel="stylesheet">-->

<!--</head>-->
<!--<body>-->
<!--<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">-->
<!--    <div class="container">-->
<!--        <a href="#" class="navbar-brand">标题</a>-->
<!--        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">-->
<!--            <span class="navbar-toggler-icon"></span>-->
<!--        </button>-->
<!--        <div class="collapse navbar-collapse" id="navmenu">-->
<!--            <ul class="navbar-nav ms-auto">-->
<!--                <li class="nav-item">-->
<!--                    <div class="nav-link">前端框架</div>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <div class="nav-link">前端框架</div>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <div class="nav-link">前端框架</div>-->
<!--                </li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
<!--</nav>-->

<!--<section class="p-5 bg-dark text-light text-center text-sm-start">-->
<!--    <div class="container">-->
<!--        <div class="d-flex">-->
<!--            <div>-->
<!--                <h1> 这是一个<span class="text-warning">标题</span></h1>-->
<!--                <p class="my-4">这是内容页面这是内容页面这是内容页面这是内容页面这是内容页面 </p>-->
<!--                <button class="btn btn-primary btn-lg"> 快开始</button>-->
<!--            </div>-->
<!--            <img class="w-50 d-none d-md-block" style="max-width: 300px; height: auto;"-->
<!--                 src="{{url_for('static',filename='images/2747.jpg')}}">-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!--<section class="p-5 bg-primary text-light">-->
<!--    <div class="container">-->
<!--        <div class="d-md-flex justify-content-between align-items-center">-->
<!--            <h3 class="mb-3">闲杂就是去注册</h3>-->
<!--            <div class="input-group news-input">-->
<!--                <input type="text" class="form-control" placeholder="请输入邮箱">-->
<!--                <button class="btn btn-dark btn-lg">注册</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!--<section class="p-5">-->
<!--    <civ class="container">-->
<!--        <div class="row g-4">-->
<!--            <div class="col-md">-->
<!--                <div class="card bg-dark text-light">-->
<!--                    <div class="card-body text-center">-->
<!--                        <div class="card-title">这是标题</div>-->
<!--                        <div class="card-text">这是内容页面这是内容页面这是内容页面这是内容页面</div>-->
<!--                        <a href="#" class="btn btn-primary mt-2">这是一个按钮</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md">-->
<!--                <div class="card bg-secondary text-light">-->
<!--                    <div class="card-body text-center">-->
<!--                        <div class="card-title">这是标题</div>-->
<!--                        <div class="card-text">这是内容页面这是内容页面这是内容页面这是内容页面</div>-->
<!--                        <a href="#" class="btn btn-dark mt-2">这是一个按钮</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-md">-->
<!--                <div class="card bg-dark text-light">-->
<!--                    <div class="card-body text-center">-->
<!--                        <div class="card-title">这是标题</div>-->
<!--                        <div class="card-text">这是内容页面这是内容页面这是内容页面这是内容页面</div>-->
<!--                        <a href="#" class="btn btn-primary mt-2">这是一个按钮</a>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </civ>-->
<!--</section>-->
<!--<section class="p-5">-->
<!--    <div class="container">-->
<!--        <div class="row align-items-center justify-content-between">-->
<!--            <div class="col-md ">-->
<!--                <img class="img-fluid" src="{{url_for('static',filename='images/2747.jpg')}}">-->
<!--            </div>-->
<!--            <div class="col-md p-5">-->
<!--                <h2>介绍</h2>-->
<!--                <p class="lead">这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼</p>-->
<!--                <p>这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼</p>-->
<!--                <a href="#" class="btn btn-light">查看更多</a>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!--<section class="p-5 bg-black text-light">-->
<!--    <div class="container">-->
<!--        <div class="row align-items-center justify-content-between">-->
<!--            <div class="col-md">-->
<!--                <h2>介绍</h2>-->
<!--                <p class="lead">这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼</p>-->
<!--                <p>这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼这是锻炼</p>-->
<!--                <a href="#" class="btn btn-light">查看更多</a>-->
<!--            </div>-->
<!--            <div class="col-md p-5">-->
<!--                <img class="img-fluid" src="{{url_for('static',filename='images/2747.jpg')}}">-->

<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!--<section class="p-5">-->
<!--    <div class="container">-->
<!--        <h2 class="text-center">长江问题</h2>-->
<!--        <div class="accordion accordion-flush" id="accordionFlushExample">-->
<!--            <div class="accordion-item">-->
<!--                <h2 class="accordion-header">-->
<!--                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"-->
<!--                            data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">-->
<!--                        Accordion Item #1-->
<!--                    </button>-->
<!--                </h2>-->
<!--                <div id="flush-collapseOne" class="accordion-collapse collapse show"-->
<!--                     data-bs-parent="#accordionFlushExample">-->
<!--                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate-->
<!--                        the <code>.accordion-flush</code> class. This is the first item's accordion body.-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="accordion-item">-->
<!--                <h2 class="accordion-header">-->
<!--                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"-->
<!--                            data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">-->
<!--                        Accordion Item #2-->
<!--                    </button>-->
<!--                </h2>-->
<!--                <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">-->
<!--                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate-->
<!--                        the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine-->
<!--                        this being filled with some actual content.-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="accordion-item">-->
<!--                <h2 class="accordion-header">-->
<!--                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"-->
<!--                            data-bs-target="#flush-collapseThree" aria-expanded="false"-->
<!--                            aria-controls="flush-collapseThree">-->
<!--                        Accordion Item #3-->
<!--                    </button>-->
<!--                </h2>-->
<!--                <div id="flush-collapseThree" class="accordion-collapse collapse"-->
<!--                     data-bs-parent="#accordionFlushExample">-->
<!--                    <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate-->
<!--                        the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more-->
<!--                        exciting happening here in terms of content, but just filling up the space to make it look, at-->
<!--                        least at first glance, a bit more representative of how this would look in a real-world-->
<!--                        application.-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!--<section class="p-5 bg-primary">-->
<!--    <div class="container">-->
<!--        <h2 class="text-center text-light">介绍</h2>-->
<!--        <p class="lead text-center text-white mb-5">-->
<!--            说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>-->
<!--    </div>-->
<!--    <div class="row g-4">-->
<!--        <div class="col-md-6 col-lg-3">-->
<!--            <div class="card bg-light">-->
<!--                <div class="card-bady text-center">-->
<!--                    <img class="img-fluid mb-3 rounded-circle" style="width:150px;height:150px;" src="{{url_for('static',filename='images/2747.jpg')}}">-->
<!--                    <h3 class="card-title">姓名</h3>-->
<!--                    <p class="card-text">任务详细介绍任务详细介绍任务详细介绍任务详细介绍任务详细介绍</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-6 col-lg-3">-->
<!--            <div class="card bg-light">-->
<!--                <div class="card-bady text-center">-->
<!--                    <img class="img-fluid mb-3 rounded-circle" style="width:150px;height:150px;" src="{{url_for('static',filename='images/2747.jpg')}}">-->
<!--                    <h3 class="card-title">姓名</h3>-->
<!--                    <p class="card-text">任务详细介绍任务详细介绍任务详细介绍任务详细介绍任务详细介绍</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-6 col-lg-3">-->
<!--            <div class="card bg-light">-->
<!--                <div class="card-bady text-center">-->
<!--                    <img class="img-fluid mb-3 rounded-circle" style="width:150px;height:150px;" src="{{url_for('static',filename='images/2747.jpg')}}">-->
<!--                    <h3 class="card-title">姓名</h3>-->
<!--                    <p class="card-text">任务详细介绍任务详细介绍任务详细介绍任务详细介绍任务详细介绍</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-md-6 col-lg-3">-->
<!--            <div class="card bg-light">-->
<!--                <div class="card-bady text-center">-->
<!--                    <img class="img-fluid mb-3 rounded-circle" style="width:150px;height:150px;" src="{{url_for('static',filename='images/2747.jpg')}}">-->
<!--                    <h3 class="card-title">姓名</h3>-->
<!--                    <p class="card-text">任务详细介绍任务详细介绍任务详细介绍任务详细介绍任务详细介绍</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</section>-->
<!--<section class="p-5">-->
<!--    <div class="container">-->
<!--        <h2 class="text-center mb-4">联系我们</h2>-->
<!--        <ul class="list-group list-group-flush">-->
<!--          <li class="list-group-item">An item</li>-->
<!--          <li class="list-group-item">A second item</li>-->
<!--          <li class="list-group-item">A third item</li>-->
<!--          <li class="list-group-item">A fourth item</li>-->
<!--          <li class="list-group-item">And a fifth one</li>-->
<!--        </ul>-->
<!--    </div>-->
<!--</section>-->

<!--<footer class="p-5 bg-dark text-white text-center">-->
<!--    <div class="container">-->
<!--        <p class="lead">这是页脚 &copy;</p>-->
<!--    </div>-->
<!--</footer>-->


<!--    &lt;!&ndash; 导航栏 &ndash;&gt;-->
<!--    <nav class="navbar navbar-expand-lg navbar-light bg-light">-->
<!--        <div class="container-fluid">-->
<!--            <a class="navbar-brand" href="#">Navbar</a>-->
<!--            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">-->
<!--                <span class="navbar-toggler-icon"></span>-->
<!--            </button>-->
<!--            <div class="collapse navbar-collapse" id="navbarNav">-->
<!--                <ul class="navbar-nav">-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link active" aria-current="page" href="#">首页</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">特色</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">服务</a>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="#">联系我们</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->
<!--    </nav>-->

<!--    &lt;!&ndash; 主要内容 &ndash;&gt;-->
<!--    <div class="container mt-4">-->
<!--        <h1>欢迎来到我的 Bootstrap 页面</h1>-->
<!--        <p>这是一个使用 Bootstrap 框架创建的基本 HTML 页面。</p>-->
<!--    </div>-->
{% block footer %}
<script src="{{url_for('static',filename='js/index.js')}}"></script>
{% endblock %}